<template>
	<div class="Recommend">
		<Head></Head>
		
		
		<!-- 推荐歌单 -->
		<h1 class="nav">推荐歌单</h1>
		<div class="box_img">
			<div v-for="value in imgs" class="img">
				<router-link :to="value.path">
					<img :src="value.photo" width="113rem" height="113rem">
				</router-link>
				<p>{{value.word}}</p>
				<div class="data">
					<van-icon name="service-o" />
					<span>{{value.data}}</span>
				</div>
			</div>
		</div>



		<!--  最新音乐-->
		<h1 class="nav">最新音乐</h1>
		<div style="margin-left: .3rem;">
			<ul style="height: 10rem;margin-left: .2rem;margin-right: .2rem">
				<li v-for="(article,index) in articles" style="height: 1.5rem;" :key='article.id'>
					<router-link :to="article.url">
					<a v-bind:href="article.url" style="color:#333;font-size: 0.414634rem;text-align:left;">
						{{article.title}}
					</a>
					</router-link>
					<p style="color:gray;text-align:left;margin-top:0.073171rem;"><span class="SQicon"></span> {{article.content}}</p>
					<span style="float:right;margin-top: -1rem;">
						<van-icon name="play-circle-o" color="gray" size=".8rem" />
					</span>
				</li>
			</ul>
		</div>

		<!-- 尾部logo -->
		<div class="footer">
			<img src="../assets/img/tj_logo.png" width="200rem" class="foot_img">
			<van-button plain round type="danger"  class="rg_btn">打开APP，发现更多好音乐></van-button>
			<p style="margin-top: .1rem;margin-bottom: .5rem;color: gray;">网易公司版权所有&copy;1997-2020杭州乐读科技有限公司运营</p>
		</div>



	</div>
</template>

<script>
	import Head from './Head.vue';
	
	export default {
		name: 'Recommend',
		components: {
			Head
		},
		data() {
			return {
				tabcontent: [{
						"text": "推荐音乐",
						"path": "/recommend",
					},
					{
						"text": "热歌榜",
						"path": "/helloWorld",
					},
					{
						"text": "搜索",
						"path": "/search",
					},
				],
				info: true,
				texts: ['推荐音乐', '热歌榜', '搜索'],
				imgs: [{
						"photo": require("../assets/img/tj1.jpg"),
						"word": "R&amp;B | 挽留于心的撩人节奏",
						"data": "30.4万",
						"path":"/comment"
					},
					{
						"photo": require("../assets/img/tj2.jpg"),
						"word": "所以你并没有坚定地选择过我",
						"data": "441.5万",
						"path":"/comment"
					},
					{
						"photo": require("../assets/img/tj3.jpg"),
						"word": "[假日放轻松] 放假就要大声听音乐 喵~~",
						"data": "2561万",
						"path":"/search"
					},
					{
						"photo": require("../assets/img/tj4.jpg"),
						"word": "“所以你长篇大论换来了什么.”",
						"data": "91.2万",
						"path":"/search"
					},
					{
						"photo": require("../assets/img/tj5.jpg"),
						"word": "网易云音乐年度最热新歌总结",
						"data": "2204.5万",
						"path":"/search"
					},
					{
						"photo": require("../assets/img/tj6.jpg"),
						"word": "『传统与传承』国乐大典",
						"data": "60.5万",
						"path":"/search"
					},
				],
				articles: [
					{
							"title": "谁(Live版)",
							"url": "/musicplay",
							"content": "廖俊涛 - 谁(Live版)"
					},
					{
						"title": "Never(狼殿下战爱版预告宣传曲)",
						"url": "https://www.runoob.com/html/html-tutorial.html",
						"content": "颜俊佳 - Never(狼殿下战爱版预告宣传曲)"
					},
					{
						"title": "天性使然",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "曾莉红 - 天性使然"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "马保国 - 耗子尾汁"
					},
					{
						"title": "Hey Boy",
						"url": "https://www.runoob.com/sql/sql-tutorial.html",
						"content": "Sia- Hey Boy"
					},
					{
						"title": "失眠飞行",
						"url": "https://www.runoob.com/css/css-tutorial.html",
						"content": "一条小团团OvO - 失眠飞行"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "马保国 - 耗子尾汁"
					},

				]

			}
		},


	}
</script>

<style scoped>
	.SQicon {
		display: inline-block;
		width: 0.390244rem;
		height: 0.243902rem;
		background: url('../assets/img/rgbg1.png') no-repeat 0px 0px;
		background-size: 191px auto;
		margin-right: 0.097561rem;
	}

	.foot_img {
		margin-top: 1rem;
		margin-bottom: .5rem;
	}

	.footer {
		/* margin-bottom: 1rem; */
		text-align: center;
		background-image: url(../assets/img/recommand_bg_2x.png);
		height: 5rem;
		width: 100%;
	}

	.data {
		position: relative;
		top: -3.8rem;
		float: right;
		color: #fff;
		z-index: 50;
	}

	.box_img {
		margin-left: .1rem;
		margin-right: .1rem;
	}

	.img {
		display: inline-block;
		width: 3rem;
		margin-left: .1rem;
		margin-bottom: .3rem;
	}

	.mini-font {
		font-size: 12px;
		-webkit-transform-origin-x: 0;
		-webkit-transform: scale(0.90);
	}

	.nav {
		border-left: .07rem solid red;
		padding-left: .5rem;
		font-size: .5rem;
		margin-bottom: .3rem;
		margin-left: .01rem;
	}

	.right {
		position: relative;
		top: .5rem;
		left: 7.4rem;
		color: #D43C33;
	}


	.nav_ul {
		background-color: #fff;
		margin-left: 1rem;
	}

	.text {
		color: #505050;
	}

	.nav_li {
		margin-right: 1.8rem;
		margin-top: .2rem;
		font-size: .35rem;
		display: inline-block;
	}

	.nav_li:first-child {
		border-bottom: 3px red solid;
	}

	.nav_li:hover {
		margin-right: 1.8rem;
		margin-top: .2rem;
		margin-bottom: .2rem;
		font-size: .35rem;
		display: inline-block;
		border-bottom: 3px red solid;
	}

	.icon {
		float: right;
		margin-top: -1rem;
	}

	.title {
		color: #507DAF;
		font-size: .5rem;
	}

	.right {
		position: relative;
		top: .5rem;
		left: 7.4rem;
		color: #D43C33;
	}

	.rg_logo {
		width: 100%;
		height: 84px;
		background-color: #d43c33;

	}

	.rg_logoicon {
		width: 3.963415rem;
		height: 0.909756rem;
		background: url('../assets/img/logo.png') no-repeat;
		background-size: cover;
		margin-left: 0.243902rem;
	}

	.rg_btn {
		/* color: #d43c33; */
		/* background-color: #fff; */
		/* border: 0; */
		width: 80%;

	}

	.rg_changebtn>>>.van-button {
		height: 0.97561rem;
	}

	.rg_changebtn>>>.van-button--normal {
		padding: 0 17px;
	}

	.rg_changebtn>>>.van-button--normal {
		font-size: 16px;
	}
</style>
